import lodash from "lodash";
import styles from "./index.module.less";
import { useRefModel } from "@/utils/hooks";
export default defineComponent({
  name: "SSelect",
  props: {
    newValue: {
      type: String,
      default: undefined,
    },
    disabled: {
      type: [Boolean, Object],
      default: false,
    },
    options: {
      type: [Array, Object],
      default: () => [],
    },
    mode: {
      type: [String, Object],
    },
    allowClear: {
      type: [Boolean, Object],
      default: false,
    },
    placeholder: {
      type: [String, Object],
    },

    defaultActiveFirstOption: {
      type: [Boolean, Object],
      default: true,
    },
    showSearch: {
      type: [Boolean, Object],
      default: false,
    },
    filterOption: {
      type: [Function, Object],
      default: () => {},
    },
    onSelect: {
      type: [Function, Object],
      default: () => {},
    },
    onChange: {
      type: [Function, Object],
      default: () => {},
    },
  },
  emits: ["update:newValue"],
  setup(props: any, { slots, emit, attrs, expose }: any) {
    const tmp_props = reactive<any>({});
    Object.keys(props).forEach((key: any) => {
      tmp_props[key] = props[key]?.value ?? props[key];
    });
    const keyword = useRefModel(props, "newValue", emit);
    const $props = {
      ...lodash.omit(tmp_props, ["newValue"]),
      ...attrs,
    };
    return () => {
      let vSlots = { ...slots };

      return (
        <a-select vModel:value={keyword.value} vSlots={vSlots} {...$props} />
      );
    };
  },
});
